<template>
  <div id="overall" class="tundra">
    <div id="map"></div>
  </div>
</template>
<script>
  import esriLoader from 'esri-loader'

  export default {
    name: 'overall',
    data () {
      return {
        esriMap: {},
        loadScriptPromise:null

      }
    },
    watch: {


    },
    created () {

    },
    mounted: function () {
      // 监听esriLoader是否存在，创建map
      var self  = this;
      this.loadScriptPromise = esriLoader.loadScript({url:"https://js.arcgis.com/3.16/"});
      this.loadScriptPromise.then(() => {
         self.createMap();
        })
        .catch(err => {
          // handle any script loading errors
          console.error(err);
        });
    },
    methods: {
      // 创建地图
      createMap: function () {
       /* esriLoader.dojoRequire(["esri/map",
          "esri/SpatialReference",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/layers/FeatureLayer",
          "dojo/topic",
          "esri/layers/ArcGISTiledMapServiceLayer",
          "esri/layers/WMTSLayer",
          "esri/layers/WMTSLayerInfo",
          "esri/geometry/Extent",
          "esri/layers/TileInfo",
          "dojo/domReady!"], (Map,SpatialReference,ArcGISDynamicMapServiceLayer,FeatureLayer,topic,ArcGISTiledMapServiceLayer,WMTSLayer ,WMTSLayerInfo,Extent,TileInfo) => {
          window.esriMap = new Map("map", {
            center: [119.7436318879092, 29.972064471999997],
            zoom: 10
          });
          var baseLayer = new ArcGISTiledMapServiceLayer("http://www.hangzhoumap.gov.cn/Tile/ArcGISFlex/HZTDTVECTORBLEND.gis",{id:"baseLayer"});
          window.esriMap.addLayer(baseLayer);

          window.esriMap.on("load", function() {
            topic.publish("afterMapLoaded",1);
          })

        });*/

        esriLoader.loadModules(["esri/map",
          "esri/SpatialReference",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/layers/FeatureLayer",
          "dojo/topic",
          "esri/layers/ArcGISTiledMapServiceLayer",
          "esri/layers/WMTSLayer",
          "esri/layers/WMTSLayerInfo",
          "esri/geometry/Extent",
          "esri/layers/TileInfo",
          "dojo/domReady!"])
          .then(([Map,SpatialReference,ArcGISDynamicMapServiceLayer,FeatureLayer,topic,ArcGISTiledMapServiceLayer,WMTSLayer ,WMTSLayerInfo,Extent,TileInfo]) => {
            window.esriMap = new Map("map", {
              center: [119.7436318879092, 29.972064471999997],
              zoom: 10
            });
            var baseLayer = new ArcGISTiledMapServiceLayer("http://www.hangzhoumap.gov.cn/Tile/ArcGISFlex/HZTDTVECTORBLEND.gis",{id:"baseLayer"});
            window.esriMap.addLayer(baseLayer);

            window.esriMap.on("load", function() {
              topic.publish("afterMapLoaded",1);
            })

          })
          .catch(err => {
            // handle any script or module loading errors
            console.error(err);
          });

      }
    }

  }
</script>
<style>
  /*@import url('http://21.15.116.29:82/arcgis_js_api/library/3.17/3.17/esri/css/esri.css');*/
  @import url('https://js.arcgis.com/3.16/esri/css/esri.css');
.esriSimpleSliderDecrementButton .esriIconFallbackText{
    display: none;
  }
.esriSimpleSliderIncrementButton .esriIconFallbackText{
  display: none;
}
  .map .logo-med{
    display: none;
  }
 #overall {
   height: 100%;
 }
  #map{
    height: 100%;
  }
</style>
